import { Col, message, Row } from 'antd';
import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table } from 'antd'
import { SearchOutlined, } from "@ant-design/icons"
import { useNavigate } from "react-router-dom";
import {
    getHospitalListRequest,
    getProvinceRequest,
    getCityOrDistrictRequest,
    changeStatusRequest
} from "@/api/hospital/hospitallist"
import type {
    getHosListSearchParamsType,
    hospitalListContentType,
    hospitalListItemsType,
    getProvinceReturnType
} from "@/api/hospital/model/hospitalListTypes"

export default function HospitalList() {
    const navigate = useNavigate();
    const [form] = Form.useForm()
    //控制表格的是否加载中的状态
    const [isLoading, setIsLoading] = useState(false)
    // 控制当前页码的状态
    const [page, setPage] = useState(1)
    // 控制每页显示的条数
    const [limit, setLimit] = useState(3)
    // 控制医院的总数量
    const [total, setTotal] = useState(0)
    // 控制查询用户输入的表单参数
    const [searchParams, setSearchParams] = useState<getHosListSearchParamsType>({})
    // 控制表格的数据
    const [hospitalList, setHospitalList] = useState<hospitalListContentType>([])
    // 控制省份的状态
    const [province, setProvinces] = useState<getProvinceReturnType>([])
    // 控制市的数据
    const [cityList, setCityList] = useState<getProvinceReturnType>([])
    // 控制区的数据
    const [district, setDistrict] = useState<getProvinceReturnType>([])
    // 控制医院类型
    const [hospitalType, setHospitalType] = useState<getProvinceReturnType>([])
    // 控制重新渲染的state
    const [reRender, setReRender] = useState(true)

    //1 刚加载组件时，发送医院列表的请求
    useEffect(() => {
        setIsLoading(true)
        const getHospitalList = async () => {
            const re = await getHospitalListRequest(page, limit, searchParams)
            // 把结果中医院列表的数组设置给状态state
            setHospitalList(re.content)
            // 把结果中的医院总数设置给状态state
            setTotal(re.totalElements)
            setIsLoading(false)
        }
        getHospitalList()
    }, [searchParams, page, limit, reRender]);

    // 2初始化的时候请求所有的省份
    useEffect(() => {
        const getProvince = async () => {
            const result = await getProvinceRequest();
            // console.log(result, "result");
            // 把得到的身份列表放在state中
            setProvinces(result)
        }
        getProvince()
    }, [])
    // 3初始化的时候立即请求医院类型
    useEffect(() => {
        const getHospitalType = async () => {
            const result = await getCityOrDistrictRequest("10000");
            // console.log(result);

            setHospitalType(result)
        }
        getHospitalType()
    }, [])
    // 事件回调函数
    // 1选择省份的时候事件回调函数
    const changeProviceHandle = async (value: string) => {
        // 根据省份的value发送市的请求
        const result = await getCityOrDistrictRequest(value)
        // console.log(result, "result");

        setCityList(result);
        // 选择完省份之后，把市和区的value清空，参数和name一一对应的
        form.setFieldsValue({ cityCode: null, districtCode: null })
    }

    // 2选择市的时候事件回调
    const cityChangeHandle = async (value: string) => {
        // 根据市的value发送区的请求
        const result = await getCityOrDistrictRequest(value)
        // 把结果交给state保管
        setDistrict(result)
        //选择完市的时候,把区目前的value清除掉
        form.setFieldsValue({ districtCode: null });
    }
    //3.查询表单的提交事件
    const finishHandle = (value: getHosListSearchParamsType) => {
        // console.log(value);
        setSearchParams(value);
    };
    //4.点击查询表单的清空按钮
    const clearSearchHandle = () => {
        setSearchParams({});
    };
    //5.点击查看按钮事件回调函数
    const hospitalDetailHandle = (id: string) => {
        return () => {
            navigate(`/syt/hospital/hospitalShow/${id}`, {
                // 测试state传值
                state: { hello: "world" },
            });
        };
    };
    // 6点击上下线事件函数
    const changeStateHandle = (id: string, status: 0 | 1) => {
        return async () => {
            await changeStatusRequest(id, status)
            message.success("改变医院上下线成功")
            // 重新渲染
            setReRender(!reRender);
        }
    }

    // 7排版规则
    const showScheduleHandle = (hoscode: string) => {
        return () => {
          navigate(`/syt/hospital/hospitalSchedule/${hoscode}`);
        };
      };



    const columns = [
        {
            title: '序号',
            width: 60,
            dataIndex: 'index',
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '医院logo',
            dataIndex: 'logoData',
            render(logoData: string) {
                return (
                    <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
                )
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '等级',
            render(_: any, data: hospitalListItemsType) {
                return data.param.hostypeString
            }
        },
        {
            title: '详细地址',
            render(_: any, data: hospitalListItemsType) {
                return data.param.fullAddress
            }
        },
        {
            title: '状态',
            render(_: any, data: hospitalListItemsType) {
                return data.status === 0 ? "下线" : "上线"
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            width: 120,
            fixed: "right" as "right",
            render(_: any, data: hospitalListItemsType) {

                return (
                    <div>
                        <Button type='primary' onClick={hospitalDetailHandle(data.id)}>查看</Button>
                        <Button type='primary' onClick={showScheduleHandle(data.hoscode)} >排班</Button>
                        <Button type='primary' onClick={changeStateHandle(data.id, data.status === 0 ? 1 : 0)} >
                            {data.status === 0 ? "上线" : "下线"}
                        </Button>
                    </div >
                )
            }
        }
    ];
    return (
        <div>
            <Card>
                <Form name="basic" form={form} onFinish={finishHandle}>
                    <Row>
                        <Col span={4} offset={1}>
                            <Form.Item name="provinceCode">
                                <Select placeholder="请输入省份"
                                    allowClear
                                    onChange={changeProviceHandle}>
                                    {province.map((item) => {
                                        return (
                                            <Select.Option value={item.value} key={item.id}>
                                                {item.name}
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="cityCode" >
                                <Select placeholder="请输入市" allowClear
                                    onChange={cityChangeHandle}>
                                    {cityList.map((item) => {
                                        return (
                                            <Select.Option value={item.value} key={item.id}>
                                                {item.name}
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="districtCode" >
                                <Select placeholder="请输入县/区" allowClear>
                                    {district.map((item) => {
                                        return (
                                            <Select.Option value={item.value} key={item.id}>
                                                {item.name}
                                            </Select.Option>
                                        );
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="hosname">
                                <Input placeholder="医院名称" />
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="hoscode" >
                                <Input placeholder='医院编号' />
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="hostype"  >
                                <Select placeholder="医院类型" allowClear >
                                    {hospitalType.map((item) => {
                                        return (
                                            <Select.Option value={item.value} key={item.id}>
                                                {item.name}
                                            </Select.Option>
                                        )
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={4} offset={1}>
                            <Form.Item name="status" >
                                <Select
                                    placeholder="医院状态"
                                    allowClear
                                >
                                    <Select.Option value={1}>上线</Select.Option>
                                    <Select.Option value={0}>下线</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={1} offset={1}>
                            <Form.Item >
                                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
                                    查询
                                </Button>
                            </Form.Item>
                        </Col>

                        <Col span={1} offset={1}>
                            <Form.Item>
                                <Button type="default" htmlType="reset" onClick={clearSearchHandle}>
                                    清空
                                </Button>
                            </Form.Item>
                        </Col>

                    </Row>
                </Form>

                <Table
                    style={{ marginTop: "30px" }}
                    columns={columns}
                    dataSource={hospitalList}
                    scroll={{ x: 1100 }}
                    bordered
                    //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
                    rowKey="id"
                    loading={isLoading}

                    pagination={{
                        //页码的配置：当前页码
                        current: page,
                        //总数据的数量
                        total: total,
                        //每页条数
                        pageSize: limit,
                        //展示更改每页条数的选项(默认total大于50条的时候开启)
                        pageSizeOptions: [3, 8, 15],
                        //是否直接开启更新每页条数的选项
                        showSizeChanger: true,

                        showTotal(total) {
                            return `总共有${total}条数据`
                        },
                        onChange(page: number, pageSize: number) {
                            setPage(page);
                            setLimit(pageSize);
                        },
                    }}
                />
            </Card>
        </div >
    )
}
